<html>
<head>
	<meta charset="UTF-8"> 
	<style type="text/css">
		html,body{
			left: 0px;
			top: 0px;
			margin：0px;
			padding: 0px;
		}
		#myCanvas{
			width:100%;
			height: 100%;
			border: 1px solid #ccc;
		}
	</style>

	<script type="text/javascript">
		function init(){

			// 2.获取画布对象，设置canva大小
			var canvas = document.getElementById("myCanvas");
			canvas.width  = window.innerWidth;
			canvas.height = window.innerHeight;

			// 3.获取绘图设备
			var ctx = canvas.getContext("2d");

			// 4.定义Image对象及其资源地址
			var img = new Image();
			img.src = "images/world.png";

			// 5.定义onload的响应函数
			img.onload = function(){
				var w = img.width;
				var h = img.height;
				//绘制图像
				ctx.drawImage(img,
						0,0,w,h,		//使用img的原始大小，表明不裁剪
						0,0,w/4,h/4		//图像的显示宽度和高度为原来的1/4
				);
			}
		}

		function drawPoints(ctx, width, height){
						
			var cx,cy;
			for(var i=0; i<100000; i++){
				cx = Math.random() * width;
				cy = Math.random() * height;

				ctx.beginPath();
				ctx.arc(cx,cy,2,0,Math.PI*2,true);
				ctx.fill();
				ctx.stroke();
			}			
		}
	</script>

    <title>Canvas 绘图</title>
</head>

<body onload=init();>
	<!-- 1.定义Canvas元素-->
	<canvas id="myCanvas" width="400" height="400"></canvas>

</body>
</html>


